<!-- 
  @name: 导航栏
  @date: 2020.1.6
 -->
<template>
	<view class="nav-title" :class="[navPageScroll ? 'bg1' : '']" :style="{'backgroundColor':backgroundColor}">
		<!-- 占位区，隔离系统任务栏 -->
		<view class="__blank" :style="{'height':statusHeight}"></view>
		<!-- 导航栏主体 -->
		<view class="__cont">
			<view class="__back" @tap="navigate" v-if="!backHome">
				<view class="__i" :class="[navPageScroll ? '__i1' : '__i2',blackTheme?'__i1':'']"></view>
			</view>
			<view class="__home" @tap="naviHome" v-if="backHome">
				<view class="__i" :class="[navPageScroll ? '__i1' : '__i2',blackTheme?'__i1':'']"></view>
			</view>
			<view class="__text" :class="[navPageScroll ? 't2' : 't1',blackTheme?'t2':'']">{{navTitle}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			pageScroll: {
				type: Boolean,
				default: false  //页面是否上滑，true为已上滑，false为未上滑
			},
			navigateBack: {
				type: [Number, String],
				default: 1  //页面返回层级，默认返回上一页
			},
			backHome: {
				type: Boolean,
				default: false  //是否显示返回首页图标
			},
			blackTheme: {
				type: Boolean,
				default: false  //是否显示返回首页图标
			},
			backgroundColor: {
				type: String,
				default: ''  // 导航条背景颜色
			}
			
		},
		data() {
			return {
				navTitle: this.title,
				navPageScroll: this.pageScroll
			}
		},
		computed:{
			statusHeight() {
				return this.$systeminfo.statusBarHeight + 'px';
			},
		},
		watch: {
			title(newVal, oldVal) {
				this.navTitle = newVal;
			},
			pageScroll(newVal, oldVal) {
				this.navPageScroll = newVal;
			}
		},
		methods: {
			//返回前N页
			navigate() {
				uni.navigateBack({
					delta: parseInt(this.navigateBack)
				});
			},
			//返回首页
			naviHome() {
				uni.reLaunch({
				    url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-title.bg1 {
		background: $color-white;
	}
	.nav-title {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: $z-index-nav-title;
		.__blank{
			width: 100%;
		}
		.__cont {
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.__back,
			.__home {
				width: 62rpx;
				height: 90rpx;
				display: flex;
				align-items: center;
			}
			.__back {
				justify-content: center;
				.__i {
					width: 20rpx;
					height: 35rpx;
				}
				.__i.__i1 {
					background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14T_4iATFiEAAABCOATjIQ462.png') !important;
				}
				.__i.__i2 {
					background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14T_3OAIeWOAAALxWOR2qw455.png');
				}
			}
			.__home {
				justify-content: flex-end;
				.__i {
					width: 45rpx;
					height: 40rpx;
				}
				.__i.__i1 {
					background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16QHd2ANE40AAADxki4yC0395.png');
				}
				.__i.__i2 {
					background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16QHeiAFwzIAAADE5tBzcE032.png');
				}
			}
			.__text {
				flex: 1;
				margin-right: 62rpx;
				text-align: center;
				font-size: 34rpx;
				font-weight: 600;
			}
			.__text.t1 {
				color: $color-white;
			}
			.__text.t2 {
				color: $color-text;
			}
		}
	}
</style>